<template>
    <div>
      <!--搜索查询-->
      <el-row>
        <!-- <el-col :span="">&nbsp;</el-col> -->
        <el-col :span="4"
          ><el-input
            v-model="searchForm.title"
            size="mini"
            placeholder="请输入模块标题"
          ></el-input
        >
        <el-input
            v-model="searchForm.operIp"
            size="mini"
            placeholder="请输入主机地址"
          ></el-input
        >
       </el-col>
        <el-col :span="2"
          ><el-button
            type="primary"
            size="mini"
            @click="search()"
            icon="el-icon-search"
            >搜索</el-button
          ></el-col
        >
        <el-col :span="2"
          ><el-button
            type="primary"
            size="mini"
            @click="handlerAdd()"
            icon="el-icon-circle-plus"
            >添加</el-button
          ></el-col
        >
        <el-col :span="2"
          ><el-button
            type="primary"
            size="mini"
            @click="flush()"
            icon="el-icon-refresh"
            >刷新</el-button
          ></el-col
        >
      </el-row>
  
      <el-row>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            prop="operId"
            label="日志ID"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="title"
            label="模块标题"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="businessType"
            label="业务类型"
            :formatter="getStatus1"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="method"
            label="方法名称"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="content"
            label="评价内容"
            align="center"
            width="120"
          >
        </el-table-column>
          <el-table-column
            prop="operatorType"
            label="操作类别"
            :formatter="getStatus2"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="operName"
            label="操作人员"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="部门名称"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="operUrl"
            label="请求URL"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="operIp"
            label="主机地址"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="operLocation"
            label="操作地点"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="operParam"
            label="请求参数"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="operParam"
            label="操作状态"
            :formatter="getStatus3"
            align="center"
            width="120"
          >
          </el-table-column>
          
          <el-table-column
            prop="errorMsg"
            label="错误消息"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="operTime"
            label="操作时间"
            align="center"
            width="120"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="200px;"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <!--分页插件-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 3, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>
  
      <!-- 添加或编辑地址弹出框 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form" label-position="right" ref="form">
          <el-form-item label="日志ID" label-width="100px" prop="operId">
            <el-input v-model="form.operId" autocomplete="off" />
          </el-form-item>
          <el-form-item label="模块标题" label-width="100px" prop="title">
            <el-input v-model="form.title" autocomplete="off" />
          </el-form-item>
          <el-form-item
          label="业务类型"
          :label-width="formLabelWidth"
          prop="businessType">
          <!--  下拉框 -->
          <el-select v-model="form.status" placeholder="请选择业务类型">
            <el-option label="其他" value="0"></el-option>
            <el-option label="新增" value="1"></el-option>
            <el-option label="修改" value="2"></el-option>
            <el-option label="删除" value="3"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="方法名称" label-width="100px" prop="method">
            <el-input v-model="form.method" autocomplete="off" />
          </el-form-item>
          <el-form-item
          label="操作类别"
          :label-width="formLabelWidth"
          prop="operatorType">
          <!--  下拉框 -->
          <el-select v-model="form.operatorType" placeholder="请选择用户类型">
            <el-option label="其他" value="0"></el-option>
            <el-option label="后台用户" value="1"></el-option>
            <el-option label="手机端用户" value="2"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="URL" label-width="100px" prop="operUrl">
            <el-input v-model="form.operUrl" autocomplete="off" />
          </el-form-item>
          <el-form-item label="主机地址" label-width="100px" prop="operIp">
            <el-input v-model="form.operIp" autocomplete="off" />
          </el-form-item>
          <el-form-item label="操作地点" label-width="100px" prop="operLocation">
            <el-input v-model="form.operLocation" autocomplete="off" />
          </el-form-item>
          <el-form-item label="请求参数" label-width="100px" prop="operParam">
            <el-input v-model="form.operParam" autocomplete="off" />
          </el-form-item>
          <el-form-item
          label="操作状态"
          :label-width="formLabelWidth"
          prop="status">
          <!--  下拉框 -->
          <el-select v-model="form.operParam" placeholder="请选择用户状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="异常" value="1"></el-option>
          </el-select>
        </el-form-item>
          <el-form-item label="错误信息" label-width="100px" prop="errorMsg">
            <el-input v-model="form.errorMsg" autocomplete="off" />
          </el-form-item>
          <el-form-item label="操作时间" label-width="100px" prop="operTime">
            <el-date-picker
              type="datetime"
              placeholder="选择日期"
              v-model="form.operTime"
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker> 
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addORupdate('form')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        title: "",
        imgUrl: "",
        condition: false,
        data: [], //权限树数组对象
        defaultProps: {
          //父对象传值
          children: "children",
          label: "label",
        },
        nodeChecked: [], //勾选项目数组对象
        tableData: [],
        currentPage: 1, //页码 第几页
        pageSize: 5, //每页显示数量
        total: 100, //总条数
        searchForm: {  carId: "", }, //搜索form表单
        dialogFormVisible: false, //是否显示对话框  默认是不显示
        form: {}, //form表单对象
        onlineStatus: "上线", //上下操作按钮
      };
    },
    created() {
      //初始化方法 类似于jquery  $({})
      this.loadData();
    },
    //所有函数
    methods: {
      //加载数据
      loadData() {
        var _this = this;
        //复制 $http官网代码
        // var token  = localStorage.getItem("token");
        this.$http
          .post("/sysOperLog/queryPage", {
            pageNo: this.currentPage,
            pageSize: this.pageSize,
            data: { operId: this.searchForm.operId },
          })
          .then(function (response) {
            if (response.data.code == 200) {
              _this.tableData = response.data.data.records;
              _this.total = response.data.data.total;
            }
          })
          .catch(function (error) {
            console.log(error);
            _this.$message.error("你错了。。。");
          });
      },
    
      //处理更新
      handleEdit(index, row) {
        var _this = this;
        //row  当前行数据 如果是第一行  row = {deptId:1,deptName:'管理部'把一行数据赋值给form赋值,description:'店长的事',status:1}
        console.log(index, row);
        //显示对话框
        _this.dialogFormVisible = true;
        //指定对话框标题
        _this.title = "车辆更新";
        //把一行数据赋值给form赋值
        _this.form = row;
      },
       //刷新
    refresh() {
      //原始js重新请求
      location.reload();
    },
    //用户性别 把状态数字,转换成字符
    getStatus1(row, column, cellValue, index) {
      var returnValue = '';
      if(cellValue==0){
        returnValue="其他";
      }else if(cellValue==1){
        returnValue="新增";
      }else if(cellValue==2){
        returnValue="修改";
      }else if(cellValue==3){
        returnValue="删除";
      }
      return returnValue;
    },
    // //帐号状态 把状态数字,转换成字符
    getStatus2(row, column, cellValue, index) {
      var returnValue = '';
      if(cellValue==0){
        returnValue="其他";
      }else if(cellValue==1){
        returnValue="后端用户";
      }else if(cellValue==2){
        returnValue="手机端用户";
      }
      return returnValue;
    },
    //删除标志 把状态数字,转换成字符
    getStatus3(row, column, cellValue, index) {
      // var returnValue = '';
      // if(cellValue==0){
      //   returnValue="正常";
      // }else if(cellValue==1){
      //   returnValue="异常";
      // }
      // return returnValue;
      return cellValue == 0 ? "正常" : "异常";
    },
    //   //获取业务类型 把状态数字,转换成字符
    // getStatus1(row, column, cellValue, index) {
    //   var returnValue = '';
    //   if(cellValue==0){
    //     returnValue="其他";
    //   }else if(cellValue==1){
    //     returnValue="新增";
    //   }else if(cellValue==2){
    //     returnValue="修改";
    //   }else if(cellValue==3){
    //     returnValue="删除";
    //   }
    //   return returnValue;
    // },
    // //获取数据范围 把状态数字,转换成字符
    // getStatus2(row, column, cellValue, index) {
      // if(cellValue==0){
      //   returnValue="其他";
      // }else if(cellValue==1){
      //   returnValue="后端用户";
      // }else if(cellValue==2){
      //   returnValue="手机端用户";
      // }
      // return returnValue;
    // },
    // //获取操作状态 把状态数字,转换成字符
    // getStatus3(row, column, cellValue, index) {
    //   return cellValue == 0 ? "正常" : "异常";
    // },
      //处理添加
      handlerAdd() {
        //this.imgUrl = "";
        //指定对话框标题
        this.title = "车辆添加";
        //让form表单重新赋空值
        this.form = {};
        //显示对话框
        this.dialogFormVisible = true;
      },
      // 添加或编辑地址确定按钮
      addORupdate(formName) {
        console.log(formName);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var url = "";
            if (this.title == "车辆添加") {
              url = "/sysOperLog/add";
            } else {
              url = "/sysOperLog/update";
            }
            //让_this等于当前vue对象
            var _this = this;
            // alert(111);
            //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
            _this.$http
              .post(url, this.form) //指定请求的url及参数  get
              .then(function (response) {
                //正确返回对象的处理
                // handle success
                console.log(response);
                //JSON.stringify   把json转换为json字符串，方便查看
                console.log(JSON.stringify(response));
                //直接使用this 会指 axios对象  错误
                // this.tableData
                //判断返回值是否正确
                if (response.data.code == 200) {
                  //关闭弹框
                  _this.dialogFormVisible = false;
                  //提示添加成功
                  _this.$message({
                    message: "恭喜你，这是一条成功消息",
                    type: "success",
                  });
                  //重新加载数据
                  _this.loadData();
                } else {
                  //错误提示信息
                  _this.$message.error("错了哦，这是一条错误消息");
                }
              })
              .catch(function (error) {
                //错误的处理
                // handle error
                console.log(error);
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      //广告删除按钮
      handleDelete(index, row) {
        console.log(index, row);
        //确认框提示
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //让_this等于当前vue对象
            var _this = this;
            // alert(111);
            //赋值 axios官网代码  this.form =form:{deptName:'',description:'',status:1}
            _this.$http
              .delete("/sysOperLog/deleteById?id=" + row.operId) //指定请求的url及参数  get
              .then(function (response) {
                //正确返回对象的处理
                // handle success
                console.log(response);
                //JSON.stringify   把json转换为json字符串，方便查看
                console.log(JSON.stringify(response));
                //直接使用this 会指 axios对象  错误
                // this.tableData
                //判断返回值是否正确
                if (response.data.code == 200) {
                  //提示添加成功
                  _this.$message({
                    message: "恭喜你，这是一条成功消息",
                    type: "success",
                  });
                  //重新加载数据
                  _this.loadData();
                } else {
                  //错误提示信息
                  _this.$message.error("错了哦，这是一条错误消息");
                }
              })
              .catch(function (error) {
                //错误的处理
                // handle error
                console.log(error);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
    //   statusFormat(row, column, cellValue, index) {
    //     row当前行数据
    //     column 列名称
    //     cellValue 列的值
    //     index 下标
    //     alert(cellValue);
    //     return cellValue == 0 ? "下线" : "上线";
    //   },
      //处理每页数量发生变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        //让每页数量发生变化
        this.pageSize = val;
        //重载数据
        this.loadData();
      },
      //处理当前页变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        //让每页数量发生变化
        this.currentPage = val;
        //重载数据
        this.loadData();
      },
      //查询
      search() {
        this.loadData();
        this.searchForm = {};
      },
      //刷新
      flush() {
        this.currentPage = 1;
        this.pageSize = 5;
        this.loadData();
      },
    },
  };
  </script>
  <style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 178px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .pic {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>